<template>
	<view class='page-wrap login content-30'>
		<view class='page-name'>欢迎来到{{common.companyName}}</view>
		<!-- 18987422570 -->
		<!-- 12345 -->
		<view class="form-wrap">
			<view :class="field==='phoneNumber'?'form-group form-group-active':'form-group'">
				<view class="form-group__title">手机号</view>
				<view class="form-group__con">
					<input class="form-group__from" type="number" @focus="setField('phoneNumber')" @blur="setField('other')" maxlength="11" v-model="phoneNumber" placeholder="请输入11位手机号" placeholder-class="placeholder" />
				<!-- 	<image class="clear-input" @click="clearFiled('phoneNumber')" src="../../static/common/close.png" mode=""></image> -->
				</view>
			</view>
			
			<sms-code :phoneNumber="phoneNumber" @getCode='getCode'></sms-code>
			
			<button @click="formSubmit" type="default" class='login-btn'>
				<image class='login-btn__icon' v-if="checkField" src='../../static/common/login_on.png'></image>
				<image class='login-btn__icon' v-else src='../../static/common/login.png'></image>
			</button> 
		</view>

		<view class='service-read'>登录即表示您已阅读并同意
			<text class='color-theme' @click="setPopCenter(true, 1)">《用户服务协议》</text>
			和<text class='color-theme' @click="setPopCenter(true, 2)">《隐私政策》</text>
		</view>
		<pop-center v-if="popType===1" :isShow='isShow' :title='titleService' :text='textService' @popCenterClose='popCenterClose'></pop-center>
		<pop-center v-else :isShow='isShow' :title='titleRules' :text='textRules' @popCenterClose='popCenterClose'></pop-center>
	</view>
</template>

<script>
	import smsCode from '../../components/smsCode.vue'
	import popCenter from '../../components/popCenter.vue'
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return {
				phoneNumber: '',
				smsCode: '',
				isShow: false,
				titleService: '用户服务协议',
				textService:'用户服务协议',
				titleRules: '隐私政策',
				textRules:'隐私政策',
				popType: 1, // 用于区分弹出用户协议和隐私政策
				common,
				field: '', // 当前聚焦字段名称
				artFwxy: '',
				artYszz: ''
			}
		},
		methods: {
			getArt(field) {
				api.getArtByCode({ artCode: common.artCode[field] }, res => {
					this.$data[field] = res
					if(this.popType === 1) {
						// 服务协议
						this.titleService = res.artTitle
						this.textService = res.artContent
					}else{
						this.titleRules = res.artTitle
						this.textRules = res.artContent
					}
				})
			},
			
			getCode(smsCode) {
				console.log(smsCode)
				this.smsCode = smsCode
			},
			
			popCenterClose(status) {
				this.isShow = status
			},
			
			setPopCenter(status, popType) {
				let field = popType === 1 ? 'fwxy' : 'yszc'
				this.getArt(field)
				
				this.isShow = status
				this.popType = popType
				
			},
			
			setField(field) {
				this.field = field
			},
			
			// 登录
			formSubmit() {
				let { phoneNumber,smsCode } = this.$data
				if(!phoneNumber) { this.$showToast('请填写电话号码~'); return }
				if(!smsCode) { this.$showToast('请填写手机验证码~'); return }
				api.setUserPhoneAsync({ phoneNumber, smsCode }, () => {
					this.$updataUserInfo()
					this.$showToast('绑定手机号成功,页面即将返回~')
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 2000)
				})
			}
		},
		computed:{
			checkField: function() {
				if(this.phoneNumber && this.smsCode) { return true }
				return false
			}
		},
		components:{
			'sms-code': smsCode,
			'pop-center': popCenter
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.page-wrap{
		.flex-base;
		flex-direction: column;
		justify-content: center;
	}
	
	.form-group__con{
		.flex-base;
		.form-group__from{
			flex-grow: 2;
			padding-right: 10rpx;
		}
	}
	.page-name{
		font-size: 44rpx;
		.fw;
		margin: 70rpx 0;
	}
	.form-wrap{
		.login-btn{
			margin-top: 80rpx;
		}
	}
	.login-btn__icon{
		width: 130rpx;
		height: 130rpx;
	}
	.service-read{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 30rpx;
		padding:  30rpx;
		padding-bottom: 0;
		box-sizing: border-box;
		.f22;
		text-align: center;
		.color-theme{
			color: @font-orange-color
		}
	}
	.clear-input{
		width: 20rpx;
		height: 20rpx;
	}
	.form-group__active{
		border-bottom: 2px solid @font-orange-color;
	}
	.form-group{
		position: relative;
	}
	.form-group::after{
		content: '';
		display: block;
		left: 0;
		bottom: 0;
		border-bottom: 1px solid @font-orange-color;
		width: 0%;
		position: absolute;
		transition: all 0.3s linear;
	}
	.form-group-active::after{
		width: 100%;
	}
</style>
